<template>
  <div>
    <map
      id="myMap"
      style="width: 100%; height: 250px;"
      :latitude="shop.latitude"
      :longitude="shop.longitude"
      :markers="shops"
      scale='16'
      show-location
    ></map>
    <div class="shop-box">
      <div style="display:flex;height: 80px;line-height: 32px;">
        <div style="width:80%;">
          <p style="padding-top:5px;">{{shop.name}}</p>
          <p class="shop-address">{{shop.address}}</p>
        </div>
        <div style="width:20%;">
          <p v-if="shop.distance>=1000" class="shop-distance">{{shop.distance/1000}}KM</p>
          <p v-else class="shop-distance">{{shop.distance}}m</p>
          <div class="daohang" @click="handleNavigation">导航</div>
        </div>
      </div>
    </div>
    <div class="shop-box">
      <div style="display:flex;height: 80px;line-height: 32px;">
        <div style="width:80%;">
          <p style="padding-top:5px;">营业时间：{{shop.begin_time}}-{{shop.end_time}}</p>
          <p class="shop-address">门店电话：{{shop.tel}}</p>
        </div>
        <div style="width:20%;height: 80px;line-height: 80px;text-align:center;">
          <div class="zan-icon zan-icon-phone" style="color: red;font-size:25px;" @click="makePhoneCall"></div>
        </div>
      </div>
    </div>
    <div class="shop-box">
      <p style="font-size:14px;padding-top:8px;">取单时间：</p>
      <radio-group class="radio-group" @change="radioChange">
        <label class="radio-label">
          <radio value="now" color="red" checked="true" />现在，支付成功后在<label style="color:red;">店内</label>取单
        </label><br>
        <label class="radio-label">
          <picker mode="time" :start="shop.begin_time" :end="shop.end_time" @change="selectTime">
            <view class="picker">
              <radio value="appoint" color="red" />稍后，预约稍晚时间<label style="color:red;">到店</label>取单
            </view>
          </picker>
        </label>
      </radio-group>
    </div>
    <div class="btn" @click="goods_list()">开始点单</div>
  </div>
</template>
<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      /*time_ranges:['09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','19:30','20:00','20:30','21:00','21:30','22:00'],*/
      orderType:'now'
    }
  },
  computed: {
    ...mapGetters([
      'shop',
      'shops'
    ]),
  },
  async mounted () {
    
  },
  methods: {
    goods_list() {
      //用vuex保存取单类型
      this.$store.dispatch("setOrderType",this.orderType)
      wx.navigateTo({url: 'goods_list'})
    },
    selectTime(e){
      let time = e.target.value
      this.$store.dispatch("setOrderTime",time)
    },
    radioChange(e){
      console.log('value:',e.target.value)
      this.orderType = e.target.value
    },
    handleNavigation(){
      wx.openLocation({
        latitude: this.shop.latitude,
        longitude: this.shop.longitude,
        scale: 16
      })
    },
    makePhoneCall(){
      wx.makePhoneCall({
        phoneNumber: this.shop.tel
      })
    }
  }
}
</script>

<style >
.shop-box{
  width: 90%;
  background: white;
  padding-left: 15px;
  margin: 15px auto;
  border-radius: 5px;
  border: 1px solid #DBDBDB;
}
.shop-address{
  font-size:15px;
  color:#A3A3A3;
  overflow:hidden;
  word-break:keep-all;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.shop-distance{
  font-size:14px;
  color:#A3A3A3;
  padding-top:5px;
  float:right;
  padding-right:10px;
}
.daohang{
  height: 25px;
  line-height: 25px;
  border:1px solid red;
  font-size:12px;
  color:#A3A3A3;
  float:right;
  margin-right:10px;
  border-radius:5px;
  padding-left: 10px;
  padding-right: 10px;
}
radio{
  transform:scale(0.7);
}
.radio-label{
  font-size: 15px;
  padding-top: 8px;
}
.radio-group{
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn{
  width: 90%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: black;
  color: white;
  border-radius: 6px;
  margin: 0 auto;
  margin-bottom: 15px;
}
</style>